<template>
    <div class="browsing-product-list">
        <van-nav-bar title="浏览记录" :border="false"
                     left-arrow fixed placeholder
                     @click-left="$router.back()"/>
        <white-space/>
        <empty v-if="emptyProducts" description="您还没有关注任何商品"/>
        <browsing-product-list-item v-for="product in products" :key="product.id" :product="product"
                                    @delete="handleDeleteProduct" v-else/>
    </div>
</template>

<script>
  import Empty from "../../components/Empty"
  import FollowProductListItem from "../follow/FollowProductListItem"
  import WhiteSpace from "../../components/WhiteSpace"
  import { NavBar, Toast } from "vant"
  import { browsing, message, security } from "@mall/api-services"
  import BrowsingProductListItem from "@/views/browsing/BrowsingProductListItem"
  import _ from "lodash"

  export default {
    name: "BrowsingProductList",
    components: {
      BrowsingProductListItem,
      Empty,
      FollowProductListItem,
      WhiteSpace,
      [NavBar.name]: NavBar,
    },
    computed: {
      emptyProducts() {
        return _.isEmpty(this.products)
      },
    },
    data() {
      return {
        products: [],
      }
    },
    created() {
      this.refreshProducts()
    },
    methods: {
      refreshProducts() {
        const customerId = security.SecurityUserHolder.getUserId()
        browsing.BrowsingProductServiceV1.getBrowsingProducts()
          .customerId(customerId)
          .list()
          .then(pagedProducts => this.products = pagedProducts.elements)
      },
      handleDeleteProduct(product) {
        const customerId = security.SecurityUserHolder.getUserId()
        console.log(product)
        browsing.BrowsingProductServiceV1.deleteBrowsingProduct(customerId, product.id)
          .then(() => Toast("删除成功"))
          .then(this.refreshProducts)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
      },
    },
  }
</script>

<style lang="scss" scoped>
    .browsing-product-list {

    }
</style>
